<template>
    <component v-if="customChart"
               v-bind:is="customChart"
               :chartConfig="config"
               :ref="config.key"
               :config="config"
               :screenConfig="screenConfig"
               :loadView="loadView"
    ></component>
</template>

<script>
import ChartPublic from './chart-public.js';
import {Util} from '@lowcode/jpaas-base-lib';
import { PublicFunction } from "@lowcode/jpaas-share-component";
import {markRaw} from 'vue'
export default {
    name: "customChart-view",
    mixins: [ChartPublic],
    data() {
        return {
            customChart: "",
            script: "",
            template: "<div style=\"height: 100%\" :ref=\"config.key\"></div>"
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            if (this.config.customConfig && this.config.customConfig.type == 'file') {
                if (this.config.customConfig.path) {
                    let view=this.loadView(this.config.customConfig.path);
                    this.customChart =markRaw(view);
                }
            } else {
                let jsScript = this.config.customConfig ? this.config.customConfig.jsScript:'';
                if (jsScript) {
                    jsScript = Util.replaceDefault(jsScript);
                    this.script = eval('(' + jsScript + ')');
                    let key = 'customChart_' + this.config.key;
                    window.app.component(key, {
                        mixins: [ChartPublic,PublicFunction],
                        template: this.template,
                        ...this.script
                    });
                    this.customChart = key;
                } else {
                    this.customChart = "";
                }
            }
        },
        handReceive(args) {
            if (!this.config.customConfig || this.config.customConfig.type != 'file') {
                return;
            }
            let handReceive = this.$refs[this.config.key].handReceive;
            if (handReceive && typeof handReceive === "function") {
                handReceive(args);
            }
        }
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                let self = this;
                setTimeout(function () {
                    self.init();
                }, 1000)
            },
            deep: true
        },
    }
}
</script>

<style scoped>
</style>
